<template>
  <div class="tacitly">
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="职位" prop="jobName">
        <el-input v-model="form.jobName" placeholder="请输入职位" />
      </el-form-item>
      <el-form-item label="薪资(k)" prop="jobName">
        <el-input v-model="form.money" placeholder="请输入薪资(格式为xxx-xxx)" />
      </el-form-item>
      <el-form-item label="所在园区" prop="address">
        <el-select clearable
                   v-model="form.address"
                   placeholder="请选择园区"
        >
          <el-option
            v-for="item in parkList"
            :key="item.id"
            :label="item.parkName"
            :value="item.parkName"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <!--        <el-form-item label="企业名称" prop="enterpriseName">-->
      <!--          <el-input v-model="form.enterpriseName" placeholder="请输入企业名称" />-->
      <!--        </el-form-item>-->
      <el-form-item label="企业" prop="enterpriseId">
        <el-select v-model="form.enterpriseId" filterable
                   placeholder="请选择企业"
                   size="small"
                   @change="enterSelect"
        >
          <el-option
            v-for="item in qyEnterpriseList"
            :key="item.id"
            :label="item.enterpriseName"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="掌握技能" prop="skills">
        <el-button size="small" @click="addSkill">添加技能</el-button>
        <div class="skill-col" v-for="(item,index) in skillList" :key="index">
          <el-input v-model="skillList[index]"></el-input>
          <el-button size="small" type="danger" @click="delSkill(index)">删除</el-button>
        </div>
      </el-form-item>
      <el-form-item label="福利" prop="welfares">
        <el-button size="small" @click="addWelfare">添加福利</el-button>
        <div class="skill-col" v-for="(item,index) in welfareList" :key="index">
          <el-input v-model="welfareList[index]"></el-input>
          <el-button size="small" type="danger" @click="delWelfare(index)">删除</el-button>
        </div>
      </el-form-item>
      <el-form-item label="招聘人" prop="recruiter">
        <el-input v-model="form.recruiter" placeholder="请输入招聘人" />
      </el-form-item>
      <el-form-item label="联系电话" prop="phone">
        <el-input v-model="form.phone" placeholder="请输入联系电话" />
      </el-form-item>
      <el-form-item label="人数规模" prop="scale">
        <el-input v-model="form.scale" placeholder="请输入人数规模(格式为xxx-xxx)" />
      </el-form-item>
      <el-form-item label="工作年限" prop="seniority">
        <el-input v-model="form.seniority" placeholder="请输入工作年限" />
      </el-form-item>
      <el-form-item label="学历要求" prop="education">
        <el-input v-model="form.education" placeholder="请输入学历要求" />
      </el-form-item>
      <el-form-item label="职位描述">
        <editor v-model="form.describe" :min-height="192"/>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </div>
</template>

<script>
import {addNews, getNews, updateNews} from "@/api/portal/news";
import {listType} from "@/api/portal/type";
import Editor from "@/components/Editor";
import {fileupload} from "@/api/menu";
import {listData} from "@/api/system/dict/data";
import axios from "axios";
import {getToken} from "@/utils/auth";
import {addParkRecruitment, getParkRecruitment, updateParkRecruitment} from "@/api/park/parkRecruitment";
import {listQyEnterprise} from "@/api/smartParks/merchants/merchantsCompanySettlein";
import {listBuiPark} from "@/api/parkAssets/enterCommunity";

export default {
  components: {
    Editor,
  },
  data() {
    return {
      // 表单参数
      form: {
        id: null,
        jobName: null,
        address: null,
        enterpriseName: null,
        enterpriseId: null,
        skills: null,
        welfares: null,
        recruiter: null,
        phone: null,
        scale: null,
        seniority: null,
        education: null,
        describe: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        remark: null,
        delFlag: null
      },
      welfareList:[],
      skillList:[],
      parkList:[],
      qyEnterpriseList:[],
      // 表单校验
      rules: {
      }
    };
  },
  beforeRouteEnter(to, from, next) {
    if (to.query.id) {
      to.meta.title = "编辑招聘";
    } else {
      to.meta.title = "新增招聘";
    }
    next();
  },
  beforeRouteLeave(to, from, next) {
    this.$store.dispatch("tagsView/delView", this.$route);
    next();
  },
  created() {
    this.getParkList()
    listQyEnterprise().then((response) => {
      this.qyEnterpriseList = response.rows;
    });
    if (this.$route.query.id) {
      let id=this.form.id = this.$route.query.id;
      this.getParkRecruitmentInfo(id)
    }
  },
  methods: {
    getParkList(){
      //查询园区列表，赋值给parkList;
      listBuiPark().then((response) =>{
        this.parkList = response.rows;
      })
    },
    enterSelect(e){
      let na=this.qyEnterpriseList.find(item=>{
        if (item.id===e)return item
      })
      this.form.enterpriseName=na.enterpriseName
    },
    addSkill(){
      if (this.skillList.length>4){
        this.msgError('添加不能超过5个！')
        return
      }
      this.skillList.push('')
    },
    delSkill(index){
      this.skillList.splice(index,1)
    },
    addWelfare(){
      if (this.welfareList.length>4){
        this.msgError('添加不能超过5个！')
        return
      }
      this.welfareList.push('')
    },
    delWelfare(index){
      this.welfareList.splice(index,1)
    },
    // 获取新闻详情
    getParkRecruitmentInfo(id) {
      getParkRecruitment(id).then(response => {
        this.form = response.data;
        this.skillList=this.form.skills.split(',')
        this.welfareList=this.form.welfares.split(',')
      });
    },
    // 取消按钮
    cancel() {
      this.returntomenu();
    },
    /** 提交按钮 */
    submitForm() {
      this.form.skills=this.skillList.toString()
      this.form.welfares=this.welfareList.toString()
      console.log(this.form)
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateParkRecruitment(this.form).then(response => {
              this.msgSuccess("修改成功");
              this.returntomenu();
            });
          } else {
            addParkRecruitment(this.form).then(response => {
              this.msgSuccess("新增成功");
              this.returntomenu();
            });
          }
        }
      });
    }

  }
};
</script>
<style scoped lang="scss">
.tacitly .hide .el-upload--picture-card {
  display: none;
}

.tacitly {
  padding: 20px;
  box-sizing: border-box;
  width: 50%;

  .dialog-footer {
    display: flex;
    justify-content: center;
  }
}

::v-deep .el-upload-list__item {
  width: auto;
  height: auto;
  min-width: 100px;
  min-height: 100px;
  max-width: 600px;
  line-height: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

::v-deep .hideAdd .el-upload--picture-card {
  display: none !important; /* 上传按钮隐藏 */
}
</style>
